<template>
    <div class="gis-map" ref="gisMap">
        <div class="btns">
            <el-button @click="panto">panto</el-button>
        </div>
        <Map ref="map" :access-token="accessToken" map-id="map3" :options="options" @click="handleMapClick" />
    </div>
</template>

<script setup lang="ts">
import mapboxgl from 'mapbox-gl'

const accessToken = 'gis'
const options = ref({
    projection: 'globe',
    zoom: 2.2,
    center: [109, 29]
})

const handleMapClick = (e: mapboxgl.MapMouseEvent) => {
    ElMessage.success(e.lngLat.toString())
}

const map: any = useTemplateRef('map')

const $map = computed(() => (map.value.$map))

const panto = () => {
    if (!$map.value) return
    // debugger
    // map.flyTo({
    //     center: [120.2191, 30.2202],
    //     zoom: 6
    // })

    $map.value.panTo([0, 0], {
        duration: 1000,
        animate: true,

        // easing: (t) => t
    })
}

</script>

<style lang="less" scoped>
.gis-map {
    height: 100%;
    width: 100%;
    position: relative;

    .btns {
        position: absolute;
        left: 10px;
        top: 10px;
        z-index: 10;

    }
}
</style>